[ElementTiming] Mimic FCP++ rect computations This CL changes ElementTiming rect computation to use a computation similar to that used by FCP++, but relative to the owning frame. The tests show that the new computation seems more accurate as they uncovered a problem with the SVG test: default SVG size is 300x150 so it was clipping the <image> element inside. A test for rect coordinates relative to iframe is added. Bug: 879270, 943138 Change-Id: Ib8fa266bda76843fbf7ca07f82ac5bb245d52c4d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1531503 Reviewed-by: Liquan (Max) Gu <maxlg@chromium.org> Reviewed-by: Mason Freed <masonfreed@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#645021} diff --git a/element-timing/image-clipped-svg.html b/element-timing/image-clipped-svg.html new file mode 100644 index 0000000..13c4a81 --- /dev/null +++ b/element-timing/image-clipped-svg.html
@@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe image inside SVG with small dimensions</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> +let beforeRender; +async_test(function (t) { + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const index = window.location.href.lastIndexOf('/'); + const pathname = window.location.href.substring(0, index) + + '/resources/circle.svg'; + checkElement(entry, pathname, 'my_svg', beforeRender); + // Image size is 200x200 but SVG size is 100x100 so it is clipped. + checkRect(entry, [0, 100, 0, 100]); + }) + ); + observer.observe({entryTypes: ['element']}); + beforeRender = performance.now(); +}, "Able to observe svg image."); +</script> +<style> +body { + margin: 0; +} +</style> +<svg width="100" height="100"> + <image href='resources/circle.svg' elementtiming='my_svg'/> +</svg> 